<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
		
    <title>发现-专题</title>
    <link rel="stylesheet" href="../css/mui.min.css"/>
    <link rel="stylesheet" href="../css/common.css" />
    <link rel="stylesheet" href="../iconfont/iconfont.css" />
    <style>
    	.topic-img img {
    		width: 100%;
    		height: auto;
    		position: relative;
    	}
    	
    	.topic-img {
    		position: relative;
    	}
    	
    	.topic-img-text {
    		position: absolute;
    		white-space: nowrap;
    		top: 50%;
    		margin-top: -31px;
    		left: 50%;
    		margin-left: -98px;
    		border-radius: 10px;
    		font-size: 18px;
    		color: #4c4e50;
    		text-align: center;
    		background: rgba(255,255,255,.7);
    	}
    	
    	.title-1 {
    		font-size: 26px;
    	}
    	
    	.topic-text {
    		border-top: 1px solid #ccc;
    		border-bottom: 1px solid #ccc;
    	}
    	
    	.topic-jiage label{
    		font-size: 17px;
    	}
    	
    	.topic-jiage del {
    		font-size: 13px;
    	}
    	
    	.topic-btn button {
    		padding: 2px 15px;
			border-color: #999;
			background: transparent;
			color: #999;
    	}
    	.scroll-data .topic {
    		margin-bottom: 30px;
    	}
    	.scroll-data .topic:last-child {
    		margin-bottom: 0;
    	}
    </style>
</head>
<body>
	
	<!--数据列表 开始-->
	<div class="mui-content mui-scroll-wrapper container-pull-refresh no-pad">
		<div class="mui-scroll">
			<!--数据列表-->
			<section class="mui-table-view mui-row scroll-data" data-tpl="tpl-template">
				<div class="no-data"><img src="../image/icon-waiting.gif" /></div>
			</section>
		</div>
	</div>
	<!--数据列表 结束-->
	
	<!--活动模板 开始-->
	<script type="text/template" id="tpl-template">
		{{if !data || data.length == 0}}
		<div class="no-data">
			<center>暂时无数据</center>
		</div>
		{{/if}}
		{{each data as item}}
		<div class="topic" data-id="{{item.id}}">
			<div class="white">
				<div class="topic-img">
					<img src="{{image(item.thumb, '_600_0')}}" />
					<div class="topic-img-text pad-v pad-h mui-hidden">
						<div class="title-1">{{item.title}}</div>
						<div class="title-2">{{item.description}}！</div>
					</div>
				</div>
				<div class="pad-h-md pad-v-sm">
					<label>{{item.title}}</label>
				</div>
				<div class="mgn-h-md pad-v-sm text-gray topic-text">
					{{item.description}}
				</div>
				<div class="mui-row pad-h-md pad-v-sm">
					<div class="mui-col-xs-6 topic-jiage mui-hidden">
						<label class="text-primary">￥3600.00</label>
						<del class="text-gray">￥4800.00</del>
					</div>
					<div class="mui-col-xs-12 mui-text-right topic-btn">
						<button class="bdr-v btn-awesome">
							<i class="iconfont icon-down"></i> <span>{{item.likes}}</span>
						</button>
						<button class="bdr-v btn-go-detail">
							<i class="iconfont icon-feiji"></i>
						</button>
					</div>
				</div>
			</div>
		</div>
		{{/each}}
	</script>
	
	<script type="text/javascript" src="../js/mui.min.js" ></script>
	<script type="text/javascript" src="../js/jquery.min.js" ></script>
	<script type="text/javascript" src="../js/template.js" ></script>
	<script type="text/javascript" src="../js/app.js" ></script>
	<script type="text/javascript" src="discover.topic.scroll.js" ></script>
</body>
</html>